<template>
  <div class="verification">
    <!-- 页头组件 -->
    <div class="verificationHead">
    <span class="next" >
        <el-button class="elbutton" type="primary" @click="next">下一步</el-button> 
    </span>
    <el-page-header @back="goBack" content="验证手机" title="" id="ico"></el-page-header>
    </div>
    <div class="verificationForm">
     <div class="myaccountfrom">

    <el-form  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item  label="已绑定手机号码:" prop="oldphone">
            <el-input  type="password" placeholder="请输入旧手机号" v-model.number="ruleForm.oldphone"></el-input>
        </el-form-item>
    <el-form-item label="验证码:" prop="securitycode" style="margin-top:22px">
          <div id="securitycodebox">
            <el-input type="password" placeholder="请输入验证码" id="securitycode" v-model="ruleForm.securitycode" autocomplete="off"></el-input>
          </div>
           <el-button class="elbutton" :disabled="isDisabl"  type="primary" @click="securitycode">{{VerificationCode}}</el-button> 
     </el-form-item>
    </el-form>
    
    </div>  
    </div>

  </div>
</template>
<script>
export default {
    components:{
    },
    data() {
       let imitatephone=localStorage.getItem("imitatephone")//获取到当前的手机号
       console.log(imitatephone);
       var oldphone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('输入框不能为空!'));
        } else if(imitatephone==value){
          callback()
        }else if (imitatephone!==value) {
          return callback(new Error('旧手机号输入有误!'));
        } 
      };
      var securitycode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('输入框不能为空!'));
        }else if (this.securitycode=="8888") {
           callback()
        } else{
          return callback(new Error('验证码输入有误!'));
        }
      };
        
        return {
            code:null,//4位随机数
            isDisabl:false,
            VerificationCode:"获取验证码",//验证码
            Promptforsuccess:"true",
            ruleForm:{
                 oldphone:null,//旧手机号
                 securitycode:null,//验证码
            },
            //提示
            rules: {
            oldphone: [{ validator: oldphone, trigger: "blur",}],
            securitycode: [{ validator: securitycode, trigger: "blur",}],
           },
            //from表单组件默认左
           labelPosition: 'right',
        }
    },
    methods:{
         //返回 
        goBack() {
          this.$router.go(-1)
        },
        securitycode(){
            let imitatephone=localStorage.getItem("imitatephone")//获取到旧手机号
            // 当旧手机号输入正确的时候才会进行验证倒计时秒数
            if (this.ruleForm.oldphone!==null && imitatephone==this.ruleForm.oldphone) {
            this.VerificationCode="60"//验证倒计时秒数
            // btton禁用按钮
            this.isDisabl=true
            this.information()
            let timer=setInterval(()=>{
                this.VerificationCode--
                if (this.VerificationCode<=0) {
                    this.VerificationCode="重新获取验证码"
                    this.isDisabl=false//btton启用按钮
                    clearInterval(timer);
                }
            },1000)
            }
        },
        // 验证码
        information(){
            var code = '';
            var codeLength = 4;//设置长度，这里看需求，我这里设置了4
            var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);//设置随机字符
            for (var i = 0; i < codeLength; i++) {//循环codeLength 我设置的4就是循环4次
                var index = Math.floor(Math.random() * 9);//设置随机数范围,这设置为0 ~ 36
                code += random[index]; //字符串拼接 将每次随机的字符 进行拼接
                this.code = code;
            }
            console.log(this.code);

            setTimeout(()=>{
              this.$notify.info({
                title: '验证码',
                message: "验证码为："+this.code
              });
            },5000) 
        },
        next(){
           let imitatephone=localStorage.getItem("imitatephone")//获取到当前的手机号
           // 当旧手机号与验证码都输入正确的情况就跳转到绑定新手机页面
           if (this.ruleForm.securitycode==this.code && this.ruleForm.oldphone==imitatephone) {
               this.$router.push("newphone")
           }
        },
    }
};
</script>
<style lang="less" scoped>
.myaccountfrom{
    .demo-ruleForm{
        margin-top: 70px;
    }
   /deep/ .el-form-item__content {
    line-height: 0px;
    }
    /deep/ .el-form-item {
    margin-bottom: 22px;
    width: 707px;
    margin:0 auto;
    }
    /deep/ #securitycode{
        float: left;
        width: 307px;
    }
    #securitycodebox{
        float:left;
        margin-right:10px
    }
    .elbutton{
        text-align: center;
        float: left;
        width: 135px;
    }
    }
.verification{
    background-color: #ffffff;  
    .verificationHead{
            height: 45px;
            line-height:120px;
            padding-bottom: 5px;
            width: 95%;
            border-bottom:1px solid #e9eef3;
            margin: 0 auto;
            .next{
                display: inline-block;
                float: right;border-radius:10px;line-height:50px ;
                /deep/ .elbutton{
                    height: 30px;
                    width: 110px;
                    line-height: 5px;
                }
            }
    }
}
/deep/ .el-page-header {
    line-height: 50px;
}
</style>